<template>

  <div class="discussion-container">
    <div>
      <div class="avatar-wrapper">
        <img style="margin-right: 5px" :src="content.avatarPath ? baseApi + '/api/file/avatarDownload/' + content.avatarPath : Avatar" class="user-avatar">
        <p>{{ content.userName }}</p>
      </div>

      <div class="discussion-header">
        <h2>{{ content.title }}</h2>
        <span class="date">{{ content.createdTime }}</span>
      </div>
      <div ref="divContainer" class="image-container" :style="{ width: containerWidth + '%' }">
        <div v-for="(item, index) in content.fileList" :key="index" class="file">
          <el-image
            v-if="item.serviceType == IMAGE_TYPE"
            :key="baseApi+`/api/file/download/`+item.id"
            v-viewer
            fit="cover"
            :style="{ width: imageWidth + 'px' ,height: imageWidth + 'px'}"
            class="preview-image image-item"
            :src="baseApi+`/api/file/download/`+item.id"
          />
          <video
            v-if="item.serviceType == VIDEO_TYPE"
            :key="baseApi+`/api/file/download/`+item.id"
            fit="cover"
            class="media-file video-file image-item"
            :src="baseApi+`/api/file/download/`+item.id"
            :style="{ width: imageWidth + 'px' ,height: imageWidth + 'px'}"
            controls
          >
            <source :src="baseApi+`/api/file/download/`+item.id" type="video/mp4">
            您的浏览器不支持视频标签。
          </video>
          <audio
            v-if="item.serviceType == AUDIO_TYPE"
            :key="baseApi+`/api/file/download/`+item.id"
            class="media-file audio-file image-item"
            :src="baseApi+`/api/file/download/`+item.id"
            :style="{ width: imageWidth + 'px' ,height: imageWidth + 'px'}"
            controls
          />

        </div>
      </div>

      <div class="discussion-content wrap">
        <div ref="divRef" :class="textOver && !btnFold ? 'inner over' : 'inner'">
          <p ref="spanRef" class="content">{{ content.content }}</p>
        </div>
        <span v-if="textOver" class="btn" @click="btnFold = !btnFold">
          {{ btnFold ? "收起" : "展开" }}
        </span>
      </div>
      <div class="discussion-footer">
        <span class="author">{{ content.createdUserName }}</span>
        <span class="views"><i class="el-icon-view">{{ content.viewNum }}</i></span>
        <span class="likes" @click="addThumbsUp(content)">
          <i v-if="isThumbsUp" class="el-icon-message-solid">{{ content.thumbsUp }}</i>
          <i v-if="!isThumbsUp" class="el-icon-bell">{{ content.thumbsUp }}</i>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { addThumbsUpNum, deleteThumbsUpNum } from '@/api/pisciculture/communityCommunication'
import Avatar from '@/assets/images/avatar.png'
import { mapGetters } from 'vuex'
const IMAGE_TYPE = 'picture' // 图片
const VIDEO_TYPE = 'video' // 视频
const AUDIO_TYPE = 'audio' // 音频
export default {
  name: 'Content',
  props: {
    content: Object
  },

  data() {
    return {
      Avatar,
      communication: {
        id: null
      },
      isThumbsUp: this.content.isThumbsUp, // 是否点赞
      textOver: false, // 文本是否超出3行
      btnFold: false, // 按钮默认显示展开
      IMAGE_TYPE,
      VIDEO_TYPE,
      AUDIO_TYPE,
      imageWidth: 50,
      containerWidth: 100
    }
  },

  computed: {
    ...mapGetters([
      'baseApi'
    ])

  },
  watch: {
    content: {
      handler(newValue, oldValue) {
        this.isThumbsUp = newValue.isThumbsUp
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log('imageWidth', this.$refs.divContainer.offsetWidth)
      const length = !this.content.fileList ? 0 : this.content.fileList.length
      console.log('length', length)
      this.imageWidth = this.$refs.divContainer.clientWidth / (length > 2 ? 3 : length) - 1
    })
  },
  created() {
    this.$nextTick(() => {
      // 判断文本是否超过3行
      if (this.$refs.divRef) {
        const descHeight = window
          .getComputedStyle(this.$refs.divRef)
          .height.replace('px', '')
        // console.log('descHeight:' + descHeight)
        if (descHeight > 60) {
          this.textOver = true
        } else {
          this.textOver = false
        }
      }
    })
  },
  methods: {
    // 点赞
    addThumbsUp(communication) {
      this.communication.id = communication.id
      if (this.isThumbsUp) {
        deleteThumbsUpNum(JSON.stringify(this.communication)).then((res) => {
          this.content.isThumbsUp = !communication.isThumbsUp
          this.isThumbsUp = !communication.isThumbsUp
          this.content.thumbsUp -= 1
          this.$message({
            message: '取消点赞',
            type: 'success'
          })
        })
      } else {
        addThumbsUpNum(JSON.stringify(this.communication)).then((res) => {
          this.content.isThumbsUp = !communication.isThumbsUp
          this.isThumbsUp = !communication.isThumbsUp
          this.content.thumbsUp += 1
          this.$message({
            message: '点赞成功',
            type: 'success'
          })
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.video-file{
  object-fit: fill;
}
.file{
  box-shadow: 0 0 0.1px #ddd;
  border-width: 0.1px;
}
.image-container {
  //width: 100%; /* 固定宽度 */
  height: 100%;
  display: flex; /* 使用flexbox布局 */
  flex-wrap: wrap; /* 允许换行 */
  max-height: 100%; /* 图片最大高度为容器高度 */
  object-fit: scale-down; /* 图片会保持原比例，且不会超过其原始大小 */
  align-items: center;
}

.image-item {
  margin: 0 0 0.1px; /* 图片之间的间隔 */
  height: auto; /* 图片高度自动 */

}
.discussion-container {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 10px;
  align-self: center;
  margin-left: 20px;
  margin-right: 20px;

  width: 60%;
}
.discussion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discussion-content {
  margin: 10px 0;
}

.discussion-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date, .author, .views, .likes {
  color: #666;
  font-size: 0.8em;
}

.avatar-wrapper {
  overflow: auto;

  .user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    float: left;
  }
}

.content{
  letter-spacing: 2px;
  line-height: 25px;
  text-indent: 4ch;
}

.wrap {
   padding-bottom: 30px;
}
.over {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.btn {
  font-size: 14px;
  color: #198bff;
  float: right;
  cursor: pointer;
  margin-top: 10px;
}
</style>
